<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备管理</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/>
    <style>
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {

            vertical-align: middle;

        }

        /*.table {*/
        /*width:2000px;*/
        /*max-width:8000px;*/

        /*}*/
    </style>
</head>
<body>
<div id="app" style="padding:10px;">
    <div id="tu" v-if="currentPicURL" style="text-align:center;position:fixed;width:100%;z-index:9999">
        <img :src="currentPicURL"
             style="transition:all .6s" id="datu" title="单击旋转" onclick="xuanzhuan()"/>
        <div style="position:fixed;bottom:0px;z-index:5000">
            <button type="button" @click="currentPicURL=''" class="layui-btn">关闭</button>
        </div>
    </div>
    <script>
        var dushu = 0;

        function xuanzhuan() {
            dushu += 90;
            // alert(dushu)
            datu.style.transform = 'rotate(' + dushu + 'deg)'
        }
    </script>

    <table class="table table-striped">
        <thead>
        <tr>
            <th width="50">序号</th>
            <th width="100">设备名称</th>
            <th>设备类型</th>
            <th>设备图片</th>
            <th>录入日期</th>
            <th>设备编号</th>
            <th>报修二维码</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="b in bxms">
            <td>{{b.id}}</td>
            <td>{{b.name}}</td>
            <td>{{b.equipmentType.typeName}}</td>
            <td>
                <!--<img v-for="p in b.equipmentPics"-->
                <!--:src="p.url" width="30%" style="margin:10px;" />-->
            </td>

            <td>{{b.createdate}}</td>
            <td>{{b.eNo}}</td>
            <td><img
                    @click="showBigPic('http://java59.hfbdqn.cn/findimg?fileName='+b.barCode)"

                    width="50" :src="'http://java59.hfbdqn.cn/findimg?fileName='+b.barCode"
                    width="90%"/></td>
            <td>{{['正常','正在维修','报废'][b.status]}}</td>
            <td>
                <div v-if="b.status==0||b.status==1">
                    <button type="button" class="layui-btn" @click="shenhe(b.id,0)">正常</button>
                    <button type="button" class="layui-btn layui-btn-danger" @click="shenhe(b.id,1)">正在维修</button>
                    <button type="button" class="layui-btn" @click="shenhe(b.id,2)">报废</button>
                </div>
                <button type="button" v-else-if="b.status==2" class="layui-btn">已报废</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div style="text-align:center;padding:20px;">{{ loadingtxt}}</div>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script>

    //   window.onload = function() {
    //       var imgs = document.getElementsByTagName("img");
    //       alert(imgs.length);
    //       for (var i = 0; i < imgs.length; i++) {
    //        //   console.log(imgs[i]);
    //           imgs[i].onload = function () {
    //               console.log(imgs[i]);
    //           }
    //       }
    //  };

    layui.use('layer');

    var v = new Vue({
        el: "#app",
        data: {
            currentPicURL: '',
            p: 1,
            size: 10,
            bxms: [],
            total: 0,
            pages: 0,
            loadingtxt: '拼命加载中...'
        },
        methods: {
            showBigPic: function (url) {
                this.currentPicURL = url ? url : '../../images/zhizhao.png'
            },
            shenhe: function (id, status) {
                if (status == 2) {
                    layer.confirm('是否确认报废？（一经报废，无法恢复！）',{
                        icon:3,
                        title:'提示信息'
                    },function(){
                        $.get("/sbwx_shenhe", {id: id, status: status}, function (data) {
                            if (data == true) {
                                layer.msg('设置成功！', {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    location.reload();
                                });
                                loadData();
                            } else {
                                layer.msg('设置失败！', {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    location.reload();
                                });
                                loadData();
                            }
                        })
                    })
                } else {
                    $.get("/sbwx_shenhe", {id: id, status: status}, function (data) {
                        if (data == true) {
                            layer.msg('设置成功！', {
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.reload();
                            });
                            loadData();
                        } else {
                            layer.msg('设置失败！', {
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.reload();
                            });
                            loadData();
                        }
                    })
                }
            }
        }
    });
   /* //发送操作请求
    function requestget(id, status){
        $.get("/sbwx_shenhe", {id: id, status: status}, function (data) {
            if (data == true) {
                layer.msg('设置成功！', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.reload();
                });
                loadData();
            } else {
                layer.msg('设置失败！', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.reload();
                });
                loadData();
            }
        })
    }
*/
    loadData(v.p);

    function loadData(i) {
        if (v.loadingtxt == "我也是有底线的") {
            return;
        }
        $.get("/findall_eq", {p: i, size: v.size}, function (data) {
            console.log(data);
            v.total = data.totalElements;
            v.pages = data.totalPages;
            if (data.content.length == 0) {
                v.loadingtxt = "我也是有底线的"
            }
            v.bxms = v.bxms.concat(data.content);
        })
    }

    window.onscroll = function () {
        var ch = document.documentElement.clientHeight;
        var sh = document.documentElement.scrollHeight;
        var st = document.documentElement.scrollTop;
        //console.log(Math.ceil(ch+st)+" "+ Math.ceil(sh))
        if (Math.ceil(ch + st) == Math.ceil(sh)) {
            v.p++;
            loadData(v.p);
        }
    }
</script>
</body>
</html>